<template>
  <div id="contact">
    <!-- 构建和谐社会 -->
    <div class="harmony">
      <Harmony></Harmony>
    </div>
    <!-- 马上预约 -->
    <div class="appointment">
      <NavTitle>
        <template #center>
          <div class="title">马上预约</div>
          <div class="info">Make an appointment now</div>
        </template>
      </NavTitle>
      <el-form
        label-position="top"
        ref="EleFormRef"
        :rules="rules"
        :model="form"
      >
        <el-form-item label="姓名" prop="visitorName" label-width="60px">
          <el-input v-model="form.visitorName"></el-input>
        </el-form-item>
        <el-form-item label="手机号码" prop="phone" label-width="60px">
          <el-input v-model="form.phone"></el-input>
        </el-form-item>
        <el-form-item label="邮箱地址" prop="email" label-width="60px">
          <el-input v-model="form.email"></el-input>
        </el-form-item>
        <el-form-item
          label="预约时间"
          prop="appointment"
          v-model="form.appointment"
          label-width="60px"
        >
          <el-date-picker
            v-model="form.appointment"
            type="daterange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          />
        </el-form-item>
      </el-form>
      <button @click="submit">马上提交</button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, unref } from 'vue'

import { Harmony } from '@/components/client/contact'
import { NavTitle } from '@/components/client/public'

import { form, rules } from '@/hooks/clientFormvalidate'
import currScroll from '@/hooks/scroll'

import { bookingActivities } from '@/server/client/home'

import { ElForm, ElMessage } from 'element-plus'
import { vi } from 'element-plus/lib/locale'
// 记录当前浏览进度
currScroll()

// 获取Ele表单元素
const EleFormRef = ref<InstanceType<typeof ElForm>>()

// 表单内容

// 提交
const submit = async () => {
  const formvalid = unref(EleFormRef)
  if (!formvalid) return
  try {
    await formvalid?.validate()
    const { visitorName: name, phone, email } = form
    const appointment = form.appointment.map((item) => {
      const sTime = new Date(item).getTime()
      return sTime
    })
    const { data: visitorResult } = await bookingActivities(
      name,
      phone,
      email,
      appointment[0],
      appointment[1]
    )
    if (visitorResult.code) return ElMessage.warning(visitorResult.mes)
    ElMessage.success(visitorResult.mes)
    // 清空表单
    formvalid?.resetFields()
  } catch (error) {
    console.log()
  }
}
</script>

<style scoped lang="less">
#contact {
  // 动画名称
  animation: fadeInUp;
  // 动画持续时间
  animation-duration: 1s;
  padding-bottom: 100px;
  .appointment {
    margin-top: 100px;
    width: 1200px;
    margin: 50px auto;

    .el-form {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      .el-form-item {
        width: 200px;
        &:last-child {
          width: 300px;
        }
      }
    }
    button {
      margin-top: 50px;
      display: block;
      width: 235px;
      height: 44px;
      line-height: 44px;
      background-color: #f54f4f;
      color: #fff;
      border: none;
      cursor: pointer;
    }
  }
}
</style>
